<template>
  <div class="assetVulDetail">
    <Detail
      :head-num="3"
      :left-num="2"
      :showRightHead="showRightHead"
      :tab-active="tabActive"
      :tabs-list="tabsList"
      :title-btn="titleBtn"
      @showPrompt="showPrompt"
    >
    <!-- {{ detialInfo }} -->
      <!-- 左侧 -->
      <template #title>
        <el-tooltip
          :content="detialInfo.vulName"
          effect="dark"
          placement="bottom"
        >
          <span>{{ detialInfo.vulName }}</span>
        </el-tooltip>
      </template>
      <template #content-title-1>基本信息</template>
      <template #content-body-1>
        <LayoutInfoList :info-list="infoList"></LayoutInfoList>
      </template>
      <template #content-title-2>标签</template>
      <template #content-body-2>
        <TagManip
          :dynamic-tags="detialInfo.tag"
          @handleAdd="addTag"
          @handleClose="delTag"
        ></TagManip>
      </template>
      <!--右侧 -->
      <template #tab-content-assetProfile>
        <LayoutDraw :left-num="5" :left-span="24" :right-span="0">
          <template #content-title-1>漏洞描述</template>
          <template #content-body-1>
            <div>
              {{ detialInfo.bugDesc }}
            </div>
          </template>
          <template #content-title-2>漏洞危害</template>
          <template #content-body-2>
            <div>
              {{ detialInfo.vulHarm }}
            </div>
          </template>
          <template #content-title-3>影响组件</template>
          <template #content-body-3>
            <ul
              v-if="detialInfo?.affectProduct?.length"
              class="affectProduct-box"
            >
              <li
                v-for="(item, index) in jsonParse(detialInfo.affectProduct)"
                :key="index"
              >
                {{ item }}
              </li>
            </ul>
          </template>
          <template #content-title-4>修复方案</template>
          <template #content-body-4>
            <div>
              {{ detialInfo.solution }}
            </div>
          </template>
          <template #content-title-5>参考链接</template>
          <template #content-body-5>
            <ul v-if="detialInfo?.vulAddr?.length" class="vulAddr-box">
              <li
                v-for="(item, index) in jsonParse(detialInfo.vulAddr)"
                :key="index"
              >
                <span>{{ index + 1 }}.链接：</span>
                <a :href="item" rel="noopener noreferrer" target="_blank">
                  {{ item }}
                </a>
              </li>
            </ul>
          </template>
        </LayoutDraw>
      </template>
      <template #tab-content-exposurePath>
        <LayoutDraw :left-num="1" :left-span="24" :right-span="0">
          <template #content-title-1>资产列表</template>
          <template #content-body-1>
            <LayoutExpandableBox
              v-for="(item1, index) in expandableList"
              :key="index"
              :expandable-info="item1"
            >
            </LayoutExpandableBox>
          </template>
        </LayoutDraw>
      </template>
      <template #tab-content-associatedExposure></template>
      <template #tab-content-surfaceAnalysis></template>
    </Detail>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

import Detail from '@/components/Attack/Layout/Detail.vue';
import LayoutInfoList from '@/components/Attack/Layout/InfoList.vue';
import TagManip from '@/components/Attack/TagManip.vue';
import LayoutDraw from '@/components/Attack/Layout/Draw.vue';
import LayoutExpandableBox from '@/components/Attack/Layout/ExpandableBox.vue';
import { useAttackDetail } from '@/composables/Attack/useAttackDetail';

const {
  detialInfo,
  basicInfo,
  category,
  delTag,
  addTag,
  showPrompt,
  getDetialById,
} = useAttackDetail()


const store = useStore();
const route = useRoute();

const id = ref(route.query.id || '');
const assetList = ref([]);
const tabActive = ref('assetProfile');
const tabsList = ref([
  {
    name: 'assetProfile',
    label: '漏洞详情',
    disabled: false,
  },
  {
    name: 'exposurePath',
    label: '影响资产',
    disabled: false,
  },
]);
const showRightHead = ref(false);

const titleBtn = computed(() => {
  const urlList = ['http', 'https'];
  let array = [
    {
      flag: 'url',
      tip: '访问',
      icon: 'vul-icon-url',
    },
  ];

  if (!urlList.includes(detialInfo.value.protocol)) {
    array = array.filter((el) => el.flag !== 'url');
  }
  return [];
});

const infoList = computed(() => {
  const { vulLevel, vulType, cvssScore, cve, cnvd, cnnvd } =
    detialInfo.value;

  const foundStatus = store.state.attack.levelStatus.find(
    (status: any) => status.type === parseInt(vulLevel),
  );

  return [
    {
      label: '风险等级',
      icon: 'vul-icon-task',
      type: 'tag',
      tag: foundStatus ? foundStatus.tag : '',
      content: foundStatus ? foundStatus.value : '信息',
    },
    {
      label: '漏洞类型',
      icon: 'vul-icon-type',
      content: vulType,
    },
    {
      label: 'CVSS',
      icon: 'vul-icon-time',
      content: cvssScore == null ? '' : String(cvssScore),
    },
    {
      label: 'CVE编号',
      icon: 'vul-icon-number',
      content: cve,
    },
    {
      label: 'CNVD编号',
      icon: 'vul-icon-number',
      content: cnvd,
    },
    {
      label: 'CNNVD编号',
      icon: 'vul-icon-number',
      content: cnnvd,
    },
  ];
});

const expandableList = computed(() => {
  return assetList.value.map((el: any) => {
    return {
      labelLength: 112,
      head: [
        {
          label: '影响资产',
          content: el.assetName,
          id: el.assetId,
          assetType: el.assetType,
        },
        {
          label: '所属单位',
          content: el.company,
          id: el.assetId,
          assetType: el.assetType,
        },
      ],
      body: [
        {
          label: '漏洞位置',
          content: el.bugUrl,
        },
        {
          label: '发现时间',
          content: el.updateTime,
        },
        {
          label: '请求',
          content: el.vulReq,
          class: true,
        },
        {
          label: '响应',
          content: el.vulResp,
          class: true,
        },
      ],
    };
  });
});

const getAssetList = async () => {
  const { code, data } = await store.dispatch(
    'attack/getAssetList',
    id.value,
  );
  assetList.value = code === 0 ? data.assetList : {};
};

const jsonParse = (val: any) => {
  if (val) {
    return JSON.parse(val);
  }
  return [];
};

onMounted(async () => {
  category.value = 'assetVul'
  await getDetialById('detail/getAssetVulById');
  await getAssetList();
});
</script>

<style lang="scss" scoped>
.assetVulDetail {
  background-color: #f2f2f2;
  padding: 30px;
  height: 100%;

  .vulAddr-box {
    li {
      display: flex;
    }

    a {
      text-decoration: none;
      color: $-v-color-primary;
    }
  }
}
</style>
